<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title>

    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#div1{
	width: 640px;height: 400px;box-shadow: 0 0 10px black;position: absolute;left: 50%;top: 50%;margin: -200px 0 0 -320px;

	
}

    </style> 
</head>
<body>
<div id='div1'></div>
<script type="text/javascript">
	
var maxZ = 999999;
var imgIndex = 0;
function setStyle(obj){
	maxZ--;
	var Json = {
		'width':'100%',
		'height':'100%',
		'position':'absolute',
		'zIndex':maxZ
	}
	for(var i in Json){
		obj['style'][i] = Json[i];
	};
}
var arr = ['6876.jpg','9903.jpg','9904.jpg']
createNode(10,10);
function createNode(x,y){
	if(imgIndex == arr.length)imgIndex=0;
	var R = x,T = y;
	var oDivTop = document.createElement('div');
	setStyle(oDivTop);
	div1.appendChild(oDivTop);
	for(var i = 0;i < T;i++){
		for(var j = 0; j < R;j++){
			var oDiv = document.createElement('div');
			oDiv.style.width = div1.offsetWidth/R + 'px';
			oDiv.style.height = div1.offsetHeight/T + 'px';
			oDiv.style.float = 'left';
			oDiv.style.background='url('+arr[imgIndex]+') '+div1.offsetWidth/R*-j+'px '+div1.offsetHeight/T*-i+'px'; 
			oDiv.style.transition=Math.random()*0.5+0.9+'s all ease';
			oDivTop.appendChild(oDiv);

		}
	};
	setTimeout(function(){
		imgIndex++;


		setTimeout(function(){
			oDivTop.parentNode.removeChild(oDivTop);
		},2000);

		var allDiv = oDivTop.children;
		setTimeout(function(){
			for(var i = 0;i < allDiv.length;i++){
				allDiv[i].style.transform = 'perspective('+((Math.random()*300)+500)+'px) rotateX('+((Math.random()*720)-360)+'deg) rotateY('+((Math.random()*720)-360)+'deg) scale('+((Math.random()*3.5)+0.75)+') translateX('+((Math.random()*360)-180)+'px) translateY('+((Math.random()*360)-180)+'px)';
				allDiv[i].style.opacity='0'
			}
			createNode(R,T);
		},1000);

	},1000);



}

/*

*/




</script>
</body>
</html>